<#macro sidebar>
<#if paramsTag("nightMode")?? && (paramsTag("nightMode")=="true") >
<body class="io-black-mode">
<#else>
<body class="io-grey-mode">
</#if>
 <#if paramsTag("enablePreLoad")??>
    <div id="loading">
        <style>
            .loader {
                width: 250px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: helvetica, arial, sans-serif;
                font-weight: 900;
                color: #f1404b;
                letter-spacing: 0.2em
            }

            .loader::before,
            .loader::after {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                background: #f1404b;
                position: absolute;
                animation: load .7s infinite alternate ease-in-out
            }

            .loader::before {
                top: 0
            }

            .loader::after {
                bottom: 0
            }

            @keyframes load {
                0% {
                    left: 0;
                    height: 30px;
                    width: 15px
                }

                50% {
                    height: 8px;
                    width: 40px
                }

                100% {
                    left: 235px;
                    height: 30px;
                    width: 15px
                }
            }
        </style>
        <div class="loader">${paramsTag("textPreLoad")!""}</div>
    </div>
 </#if>
    <div class="page-container">
   <#if paramsTag("expandSidebar")??>
	<div id="sidebar" class="sticky sidebar-nav fade animate-nav" style="width: 170px">
        <#else>
        <div id="sidebar" class="sticky sidebar-nav fade mini-sidebar" style="width: 60px;">
        </#if>
            <div class="modal-dialog h-100 sidebar-nav-inner">
                <div class="sidebar-logo border-bottom border-color">
                    <!-- logo -->
                    <div class="logo overflow-hidden">
                        <a href='${paramsTag("public_website_domain")}' class="logo-expanded">
                            <img src="${ctx()}/assets/images/gf-expand-light.png" height="40" class="logo-light"
                                alt=' ${paramsTag("siteTitle")}'>
                            <img src="${ctx()}/assets/images/gf-expand-dark.png" height="40" class="logo-dark d-none"
                                alt=' ${paramsTag("siteTitle")}'>
                        </a>
                        <a href='${paramsTag("public_website_domain")}' class="logo-collapsed">
                            <img src="${ctx()}/assets/images/gf.png" height="40" class="logo-light"
                                alt='${seoTag("website_title")!""}'>
                            <img src="${ctx()}/assets/images/gf.png" height="40" class="logo-dark d-none"
                                alt='${seoTag("website_title")!""}'>
                        </a>
                    </div>
                    <!-- logo end -->
                </div>
                <div class="sidebar-menu flex-fill">
                    <div class="sidebar-scroll">
                        <div class="sidebar-menu-inner">
                            <ul>
                                <@navCatTag>
                                   <#if data?? &&(data?size>0)>
                                         <#list data as item>
                                           <#if  (item.children??) && (item.children?size>0)>
                                                <li class="sidebar-item">
                                                       <#if item_index = 0>
                                                        <a href='#${ md5(item.name)!""}' class="smooth change-href" data-change='#${ md5(item.name)!""}'>
                                                        <#else>
                                                        <a  class="smooth change-href">
                                                      </#if>
                                                        <i class="${item.meta.icon } icon-fw icon-lg mr-2"></i>
                                                        <span>${(item.name)!""}</span>
                                                        <i class="iconfont icon-arrow-r-m sidebar-more text-sm"></i>
                                                    </a>
                                                    <ul>
                                                        <#list item.children as ch>
                                                              <li><a href='#${ md5(ch.name)!""}' class="smooth"><span>${(ch.name)!""}</span></a></li>
                                                        </#list>
                                                    </ul>
                                                </li>
                                           <#else>
                                                <li class="sidebar-item">
                                                    <a href='#${ md5(item.name)!""}' class="smooth">
                                                        <i class='${(item.meta.icon)!"" } fa-lg icon-fw icon-lg mr-2'></i>
                                                        <span>${(item.name)!""}</span>
                                                    </a>
                                                </li>
                                           </#if>
                                         </#list>
                                 </#if>
                            </@navCatTag>
                            </ul>           
                        </div>
                    </div>
                </div>
                <div class="border-top py-2 border-color">
                    <div class="flex-bottom">
                        <ul>
                            <li id="menu-item-237"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237 sidebar-item">
                                <a href='${paramsTag("public_website_domain")}/p/links.html' target="_blank">
                                    <i class="fas fa-file-upload icon-fw icon-lg mr-2"></i>
                                    <span>网站提交</span></a>
                            </li>

			    <li id="menu-item-212"
                                 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-212 sidebar-item">
                                 <a href="#friendlink" class="smooth">
                                     <i class="fab fa-staylinked icon-fw icon-lg mr-2"></i>
                                     <span>友情链接</span>
                                 </a>
                            </li>

                            <li id="menu-item-213"
                                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-213 sidebar-item">
                                <a target="_blank" rel="noopener" href='${paramsTag("public_website_domain")}/p/about.html'>
                                    <i class="fa fa-info-circle icon-fw icon-lg mr-2"></i>
                                    <span>关于导航</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
  </#macro>